<template>
  <!--el-select.v-model:绑定值-->
  <!--el-select.placeholder:占位符-->
  <!--el-option.label:选项的标签-->
  <!--el-option.value:选项的值-->
  <el-form :inline="true">
        <el-form-item label="一级分类">
          <el-select v-model="Category1Id" placeholder="请选择" @change="getCategory2" :disabled="disabled">
            <el-option  v-for="item in Category1List"  :key="item.id"
                        :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="二级分类">
          <el-select v-model="Category2Id" placeholder="请选择" @change="getCategory3" :disabled="disabled">
            <el-option v-for="item in Category2List" :key="item.id"
                        :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="三级分类">
          <el-select v-model="Category3Id" placeholder="请选择" @change="getCategory4" :disabled="disabled">
            <el-option v-for="item in Category3List" :key="item.id"
                       :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
</template>

<script>
  export default {
    name: "ClassSelector",
    props:["disabled"],
    data() {
      return {
        Category1List: [],
        Category1Id: "",
        Category2List: [],
        Category2Id: "",
        Category3List: [],
        Category3Id: ""
      }
    },
    methods:{
      //一级分类产生变化; 清空二三级分类 重新获取二级分类;
      async getCategory2(){
        //清空二三级分类
        this.Category2List= [],
        this.Category2Id= '',
        this.Category3List= [],
        this.Category3Id= ''

        //重新获取二级分类
        const {code,data} = await this.$api.product.attr.getCategory2(this.Category1Id);
        if(code === 200){
          this.Category2List = data;
        }

        //向外部提供数据
        this.$emit("change",{class:1,classId:this.Category1Id})
      },
      //二级分类产生变化; 清空三级分类 重新获取三级分类;
      async getCategory3(){
        //清空三级分类
        this.Category3List= [],
        this.Category3Id= ''

        //重新获取三级分类
        const {code,data} = await this.$api.product.attr.getCategory3(this.Category2Id);
        if(code === 200){
          this.Category3List = data;
        }

        //向外部提供数据
        this.$emit("change",{class:2,classId:this.Category2Id})
      },
      //三级分类产生变化
      getCategory4(){
        //向外部提供数据
        this.$emit("change",{class:3,classId:this.Category3Id})
      }
    },
    async mounted() {
      const {code,data} = await this.$api.product.attr.getCategory1();
      if(code === 200){
          this.Category1List = data;
      }
    }
  }
</script>

<style scoped>

</style>
